<template>
  <div>
    <p>学习生命周期函数 看控制台 {{ msg }}}</p>
    <ul>
      <li v-for="(val, ind) in arr" :key="ind">
        {{ val }}
      </li>
      <button @click="arr.push(1)">加1</button>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: 'hello vue',
      arr: [1, 45, 56, 20],
      timer: null // 用来清除定时器
    }
  },

  /* 
  vue生命周期是指vue中实例或组件从创建到消灭经过的一系列过程。
  new Vue()或者new VueComponent()实例化一个vm或组件实例后访问钩子函数
  */

  // 一 初始阶段 beforeCreate  created
  // 1.1 beforeCreate 在实例初始化后执行, 也就是发生在数据代理和数据劫持前, 此时不能获取到任何数据
  beforeCreate() {
    console.log('beforeCreate----执行')
    //拿不到msg变量里的值 但是此时 data 和 methods 已经初始化了
    console.log(this.msg)
  },
  // 1.2 created :数据代理和数据劫持之后, 此时可以获取到数据
  created() {
    console.log('created--执行了')

    // 此时可以获取到数据  数据侦听、计算属性、方法、事件/侦听器的回调函数都已经初始化完毕
    console.log(this.msg)
  },

  // 二 挂载阶段 beforeMount  mounted
  // 2.1 beforeMount  真实DOM挂载之前执行 此时不能操作DOM节点
  beforeMount() {
    console.log('beforeMount--执行')
    console.log(document.querySelector('p')) // 此时获取不到真实DOM
  },
  // 2.2 mounted 可以拿到挂载后的真实DOM
  mounted() {
    console.log('mounted--执行')
    // 此时视图层已渲染成最新的 vue 实例完全创建完毕 可以操作DOM
    // 可以初始化操作 开启定时器,订阅,绑定自定义事件,发送初始化数据请求
    console.log(document.querySelector('p')) // 此时可以获取到真实DOM

    this.timer = setInterval(() => {
      console.log('我是计时器 需要单独销毁我')
    }, 2000)
  },

  // 三 更新阶段  beforeUpdate  Updated  数据更新之后进入更新阶段
  // 3.1 beforeUpdate  DOM更新之前被调用 视图未更新
  beforeUpdate() {
    console.log('beforeUpdate--执行')
    console.log(document.querySelectorAll('li')[4]) //undefined
    //  因为这个函数是data的数据改变才会触发函数 需要点击按钮  但是拿不到真实dom
  },
  // 3.2 Update DOM更新之后  可以获取更新之后的数据
  updated() {
    console.log('Updated-- 执行')
    console.log(document.querySelectorAll('ul>li')[4].innerHTML)
  },

  // 四 销毁阶段 beforeDestroy  destroyed  销毁的方式: v-if  路由切换
  // 4.1 beforeDestroy 一般进行收尾工作 关闭定时器
  // 补充知识 销毁组件 但是定时器是设置给浏览器的 并不会随着组件销毁而停止 需要在这个钩子里停定时器
  beforeDestroy() {
    console.log('beforeDestroy---执行')
    // 要单独移除计时器
    clearInterval(this.timer)
  },
  destroyed() {
    console.log('destroyed--执行')
  }
}
</script>

<style>
</style>